<template>
  <section id="rechargeRecords">
    <template v-if="!isDetail">
      <div class="content">
          <div class="title">
              <div>时间</div>
              <div>订单</div>
              <div>类型</div>
              <div><span>金额 ($)</span></div>
              <div>状态</div>
              <div>操作</div>
          </div>
          <div class="lists">
            <div class="list" v-for="(item,index) in ddDataList.data" :key="index" v-if="ddDataList.total > 0">
              <div>{{item.create_time | timeToDate}}</div>
              <div>{{item.order_id}}</div>
              <div>{{item.type == 1 ? '第三方充值' : item.type == 5 ? 'USDT充值' : '手动充值'}}</div>
              <div> <span>{{item.money}}</span></div>
              <div>{{item.status == 1 && '待支付' || item.status == 2 && '成功' || item.status == 3 && '已失效'}}</div>
              <div v-if="item.status == 1">
                <a href="javascript:;" @click="toContinue(item)">继续付款</a>
                <a href="javascript:;" @click="cancelConfirm(item.order_id)">取消订单</a>
                <a href="javascript:;" v-if="item.type==1" @click="toContinue(item,3)">我已支付</a>
              </div>
              <div v-else></div>
            </div>
            <div v-if="ddDataList.total === 0">
                <base-nodata></base-nodata>
            </div>
          </div>
      </div>
      <Page :total="ddDataList.pages*10" @on-change="pageChange" v-if="ddDataList.page>0" class-name="pageUserStyle" />
    </template>
    <template v-else>
      <Base-OrderDetail :orderData="orderData"></Base-OrderDetail>
    </template>
    <base-alert :bol.sync="alertBol" :type.sync="alertType" text="撤单" @active="cancel(id)"></base-alert>
  </section> 
</template>
<script>
import {
  _getRechargeRecords,
  _queryOrder,
  _cancelOrder
} from "../../axios/index.js";
export default {
  data() {
    return {
     page:1,
     ddDataList:"",
     isDetail:false,
     orderData:null,
     alertBol:false,
     alertType:17,
     id:null
    }
  },
  methods:{
     pageChange(value){
       this.page=value;
       this.getMethod();
     },
    //获取订单记录
    async getMethod() {
      var self = this;
      let params = {
        page: self.page,
        pagesize: 10
      }
      const res = await _getRechargeRecords(params);
      if (res.data.code == 200) {
        var data = res.data.data;
        self.ddDataList=data;
      }
    },
    cancelConfirm(id) {
      this.alertBol = true;
      this.id = id;
    },
    async cancel(id) {
      const res = await _cancelOrder(id);
      if (res.data.code === 200) {
        this.$Message.success(res.data.msg);
        this.alertBol = false;
        this.getMethod();
      } else {
        this.$Message.error(res.data.msg);
      }
    },
    async toContinue(item,type) {
      const res = await _queryOrder(item.order_id);
      if (res.data.code === 200) {
        if (type == 3) {
          // 第三方支付
          if (res.data.data.status == 1) {
            this.$Message.error('该笔订单尚未支付');
          } else if (res.data.data.status == 2) {
            this.$Message.success('已成功');
          }
        } else {
          this.orderData = res.data.data;
          if (res.data.data.type == 1) {
                window.open(res.data.data.pay_path, '_blank').location;
          } else {
            this.isDetail = true;
          }
        }
      } else {
        this.$Message.error(res.data.msg);
      }
    }
  },
  created() {
    this.$emit('title','充值记录');
    this.getMethod();
  }
}
</script>
